<template>
  <div>

    <el-dialog
      title="查看设备"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <el-form labelWidth="150px">
        <el-form-item label="分类" class="is-required">
          <el-select v-model="neweqData.ep_type" placeholder="请选择" style="width:100%" disabled>
            <el-option
              v-for="item in eqtypeArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" class="is-required">
          <el-input v-model="neweqData.ep_ename" disabled></el-input>

        </el-form-item>
        <el-form-item label="管理编号" class="is-required">
          <el-input v-model="neweqData.managenum" disabled></el-input>

        </el-form-item>
        <el-form-item label="规格型号" class="is-required">
          <el-input v-model="neweqData.scale" disabled></el-input>

        </el-form-item>
        <el-form-item label="测量范围" class="is-required">
          <div class="ql-container">
            <quill-editor ref="myTextEditor"
              v-model="neweqData.range"
              class="editor"
              :options="editorOption"
              @focus="onEditorFocus($event)"
            >
            </quill-editor>
          </div>

          <!-- <el-input v-model="neweqData.range"></el-input> -->
        </el-form-item>
        <el-form-item label="精准度等级" class="is-required">
          <quill-editor ref="myTextEditor2"
            v-model="neweqData.accuracy"
            class="editor"
            :options="editorOption"
            @focus="onEditorFocus2($event)"
          >
          </quill-editor>


          <!-- <el-input v-model="neweqData.accuracy"></el-input> -->
        </el-form-item>
        <el-form-item label="出厂编号" class="is-required">
          <el-input v-model="neweqData.factory_num" disabled></el-input>

        </el-form-item>
        <el-form-item label="购置日期" class="is-required">
          <el-date-picker
            disabled
            v-model="neweqData.bytime"
            type="date"
            valueFormat="yyyy-MM-dd"
            style="width:100%"
            placeholder="选择日期"
          >
          </el-date-picker>

        </el-form-item>
        <el-form-item label="生产厂家" class="is-required">
          <el-input v-model="neweqData.factory" disabled></el-input>

        </el-form-item>

        <el-form-item label="溯源方式" class="is-required">
          <el-input v-model="neweqData.traceability" disabled></el-input>

        </el-form-item>
        <el-form-item label="检定/校准单位" class="is-required">
          <el-input v-model="neweqData.verifiy_company" disabled></el-input>

        </el-form-item>
        <el-form-item label="本次检定/校准日期" class="is-required">
          <el-date-picker
            disabled
            valueFormat="yyyy-MM-dd"
            v-model="neweqData.verifiytime"
            type="date"
            style="width:100%"
            placeholder="选择日期"
          >
          </el-date-picker>

        </el-form-item>

        <el-form-item label="检定/校准周期" disabled class="is-required">
          <el-select v-model="neweqData.verifiy_round" placeholder="请选择" style="width:100%" disabled>
            <el-option
              v-for="item in roundArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>


        </el-form-item>
        <el-form-item label="放置地点">
          <el-input v-model="neweqData.location" disabled></el-input>
          <!-- <div class="el-form-item__error" v-if="!$v.neweqData.location.required">
            请输入放置地点
          </div> -->
        </el-form-item>
        <el-form-item label="所属部门">
          <selectorg @getselectorgid="getselectorgid" :itemorgid="neweqData.orgid" disabled></selectorg>
        </el-form-item>
        <el-form-item label="期间核查次数" class="is-required">
          <el-input v-model="neweqData.period_times" disabled></el-input>

        </el-form-item>
        <el-form-item label="负责人" class="is-required">
          <el-select v-model="neweqData.charger" placeholder="请选择" style="width:100%" disabled
            clearable
          >
            <el-option
              v-for="item in jbrList"
              :key="item.value"
              :label="item.hash.username"
              :value="item.hash.pid"
            ></el-option>
          </el-select>

        </el-form-item>


        <el-form-item label="设备照片">
          <upload2 :filelimit="1" :filelink.sync="filearr1" :isedit="true" :ispic="true"
            v-if="isreload1"
          ></upload2>
        </el-form-item>
        <el-form-item label="附件">
          <upload2 :filelimit="10" :filelink.sync="filearr2" :isedit="true" :ispic="false"
            v-if="isreload2"
          ></upload2>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            disabled
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="neweqData.remark"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" class="is-required">
          <el-radio-group v-model="neweqData.status" border :textColor="'#fff'" :fill="fillcolor"
            disabled
          >
            <el-radio-button :label="item.hash.code_id" v-for="(item, index) in statusArr" :key="index">{{item.hash.code_name}}</el-radio-button>
          </el-radio-group>

        </el-form-item>
        <!-- <el-form-item label="检定参数" class="is-required">
          <el-input v-model="neweqData.verifiy_param" disabled></el-input>
        </el-form-item> -->
        <el-form-item>
          <div>&nbsp;</div>
        </el-form-item>
        <el-table
          :data="syrList"
          stripe
          style="width: 94%;margin:0 auto"
        >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="hash.username" label="姓名"></el-table-column>
          <el-table-column prop="hash.verifiy_project" label="检测项目"></el-table-column>
          <el-table-column
            label="量值"
          >
            <template slot-scope="scope">
              <div v-html="scope.row.hash.measurement">{{scope.row.hash.measurement}}</div>
            </template>
          </el-table-column>
        </el-table>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 工具栏配置
import upload2 from '~/components/common/upload2.vue';
import selectorg from '~/components/common/selectorg.vue';

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  // [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }],
  // [{ size: ['small', false, 'large', 'huge'] }],
  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // [{ font: [] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['clean'],
];

export default {

  data() {
    return {
      ts: this.newStore(),
      dialogVisible: true,
      title: '新建设备',
      neweqData: {
        period_times: '0',
      },
      syrList: [],
      editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
          },
        },
      },
      isreload1: true,
      isreload2: true,
      eqtypeArr: [],
      filearr1: [],
      filearr2: [],
      roundArr: [],
      jbrList: [],
      radio1: '',
      syridid: [],
      checkList: ['选中且禁用', '复选框 A'],
      statusArr: [],
    };
  },
  props: {
    editdata: Object,
    isedit: Boolean,
  },
  components: {
    upload2,
    selectorg,
  },
  computed: {
    fillcolor() {
      let a;
      if (this.neweqData.status == '040301') {
        a = '#333';
      } else if (this.neweqData.status == '040302') {
        a = '#cb0000';
      } else if (this.neweqData.status == '040303') {
        a = '#0e90d2';
      } else if (this.neweqData.status == '040304') {
        a = '#5bb75b';
      } else {
        a = '#ec971f';
      }
      return a;
    },
  },
  created() {
    this.getjbrList();
    this.getcodeData('0402', '04', 'eqtypeArr');
    this.getcodeData('0401', '04', 'roundArr');
    this.getcodeData('0403', '04', 'statusArr');
    if (this.isedit) {
      this.syrList = [];
      this.filearr2 = [];
      this.title = '编辑设备';
      this.neweqData = Object.assign({}, this.editdata.operation1[0].hash);
      this.syrList = this.editdata.operation2;
      if (this.neweqData.equ_photo == '') {
        this.filearr1 = [];
      } else {
        this.filearr1 = [{ url: '' }];
        this.filearr1[0].url = this.neweqData.equ_photo;
      }
      const a = {};
      for (let j = 0; j < this.editdata.operation3.length; j += 1) {
        a.url = this.editdata.operation3[j].hash.fileurl;
        a.name = this.editdata.operation3[j].hash.filename;
        this.filearr2.push(a);
      }
    }
  },
  methods: {
    // 提交编辑设备
    submitediteq() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle: 'DD5D108B99FC12B72DC0B97F927BBE3D38BC3A756AD0A780BC8C24080344A196',
              id: this.neweqData.id,
              verifiy_project: this.neweqData.verifiy_project,
              verifiy_param: this.neweqData.verifiy_param,
            };
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '保存成功',
              });
              this.$parent.geteqlist();
              this.dialogVisible = false;
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },
    // 获取经办人列表
    getjbrList() {
      this.jbrList = [];
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
        query: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jbrList = ts.d.data.operation1;
      });
    },
    onEditorFocus(editor, val) { // 富文本获得焦点时的事件
      console.log(val); // 富文本获得焦点时的内容
      editor.enable(false); // 在获取焦点的时候禁用
    },
    onEditorFocus2(editor, val) { // 富文本获得焦点时的事件
      console.log(val); // 富文本获得焦点时的内容
      editor.enable(false); // 在获取焦点的时候禁用
    },

  },

};
</script>


<style scoped>
.el-form-item {
    width: 50%;
    margin-bottom: 22px;
    float: left;
}
.statusspan{
  display: inline-block;
  width: 30px;
  height: 30px;

}
.quill-editor{
  height: auto;
}
</style>
